<template>
  <div v-if="bol">
    <!--
      vue2
         对象新增属性根本不是响应式的：对象原有属性是响应式，新增属性非响应式
         数组能改变源数组的方法是响应式的，直接修改数组某一个数据并不是响应式
         $set
         对象
         this.$set(对象,key,value)
         数组
         this.$set(数组,下标,值)

         通用方案
           适用于：数据修改了页面没有更新的情况,还原任何组件的状态
           静默刷新

    -->
    <h1>{{ obj }}</h1>
    <button @click="btnClick">修改obj</button>
    <hr />
    <h1>{{ arr }}</h1>
    <button @click="btnClick2">修改arr</button>
    <hr />
    <button @click="resetXxx">重置xxx组件</button>
    <HmXxx v-if="show"></HmXxx>
  </div>
</template>
<script>
import HmXxx from './components/HmXxx.vue'
export default {
  components: {
    HmXxx
  },
  data () {
    return {
      show: true,
      obj: {
        name: '张三'
      },
      arr: [1, 2, 3, 4, 5],
      bol: true
    }
  },
  methods: {
    btnClick () {
      this.obj.age = 18
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
      // this.$set(this.obj, 'age', 18)
      // this.obj = {
      //   name: '张三',
      //   age: 18
      // }
      // this.obj.name = 'abc'
      console.log(this.obj)
    },
    btnClick2 () {
      this.arr[0] = 999
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
      // this.arr = [999, 2, 3, 4, 5]
      // this.$set(this.arr, 0, 999)
      console.log(this.arr)
    },
    resetXxx () {
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    }
  }
}
</script>
<style></style>
